<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>

<body>
    <div class="app">
        <p>
            <input type="text" v-model="money">
        <h3>{{money | currency}}</h3>
        </p>
    </div>
</body>
<script>
    // Vue.filter("currency", (value, n) => {
    //     n = n || "￥"
    //     if (!value) return ""
    //     var arr = (value * 1).toFixed(2).split(".")
    //     var list = arr[0].split("").reverse()
    //     for (var i = 3; i < list.length; i += 4) {
    //         list.splice(i, 0, ",")
    //     }
    //     list.reverse()
    //     var list1 = ["."]
    //     var newList = list.concat(list1, arr[1])
    //     newList.unshift(n)
    //     return newList.join("")
    // })

    // Vue.filter("currency", (value, str, max, min) => {
    //     if (!value) return "";
    //     str = str || "$"
    //     max = max || 2
    //     min = min || 2
    //     return str + value.toLocalString("en", { minimumFractionDigits: min, maximumFractionDigits: max })
    // })

    var vm = new Vue({
        filter: {
            currency(value, str, max, min) {
                if (!value) return "";
                str = str || "$"
                max = max || 2
                min = min || 2
                return str + value.toLocaleString("en", { minimumFractionDigits: min, maximumFractionDigits: max })
            }
        },
        data: {
            money: 5212312300.78
        }
    }).$mount(".app")
</script>

</html>